import React, { Component } from 'react'
import { Table, Button } from 'antd';
import Dimensions from 'react-dimensions'
import AddMenuPage from './AddMenuPage'

class TableTree extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            visible: false,
        };

        this.rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };

        this.columns = [
            {
                title: '菜单名称',
                dataIndex: 'name',
                key: 'name',
                width: '20%',
            }, {
                title: '链接地址',
                dataIndex: 'href',
                key: 'href',
                width: '20%',
            }, {
                title: '样式',
                dataIndex: 'iconClass',
                key: 'iconClass',
                width: '20%',
            }, {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: '10%',
            }, {
                title: '父ID',
                dataIndex: 'parentId',
                key: 'parentId',
                width: '10%',
            },{
                title: '操作',
                key: 'action',
                width: 360,
                render: (text, record) => {
                    if(record.parentId === -1) {
                        console.log("record.parentId===", record.parentId);
                        return(
                            <span>
                                <a href="#" onClick={this.addHandle.bind(this, record.parentId, record.id)}>添加菜单</a>
                                <span className="ant-divider" />
                                <a href="#" onClick={this.addChildrenHandle.bind(this, record.parentId, record.id)}>添加子菜单</a>
                                <span className="ant-divider" />
                                <a href="#" onClick={this.updateHandle.bind(this, record)}>修改</a>
                                <span className="ant-divider" />
                                <a href="#" onClick={this.deleteHandle.bind(this, record.parentId, record.id)}>删除</a>
                            </span>
                        )
                    }else{
                        return(
                            <span>
                            <a href="#" onClick={this.addChildrenHandle}>添加子菜单</a>
                            <span className="ant-divider" />
                            <a href="#">修改</a>
                            <span className="ant-divider" />
                            <a href="#">删除</a>
                        </span>
                        )
                    }
                },
            }
        ];

        this.data = [];
        for (let i = 0; i < 100; i++) {
            this.data.push({
                key: i,
                id: i,
                parentId: -1,
                name: `一级菜单 ${i}`,
                href:`/basc/list${i}`,
                iconClass: 'left_11',

                children: [
                    {
                        key: 1000 + i,
                        id: 1000 + i,
                        parentId: i,
                        name: `二级菜单1--${i}`,
                        href:`/basc/list${i}`,
                        iconClass: 'left_11',
                    }, {
                        key: 2000 + i,
                        id: 2000 + i,
                        parentId: i,
                        name: `二级菜单2--${i}`,
                        href:`/basc/list${i}`,
                        iconClass: 'left_11',
                        children: [
                            {
                                key: 3000 + i,
                                id: 3000 + i,
                                parentId: 2000 + i,
                                name: `三级菜单1--${i}`,
                                href:`/basc/list${i}`,
                                iconClass: 'left_11',
                            }
                        ],
                    }
                ]
            });
        }
    }

    addHandle = (parentId, id) => {
        //evt.preventDefault();
        console.log("新增一个菜单组 parentId===", parentId, "  id===", id);

        this.refs.addMenu.addHandle(parentId, id);


    }
    //增加子菜单
    addChildrenHandle = (parentId, id) => {
        console.log("增加子菜单");

    }
    //修改菜单
    updateHandle = (record) => {

        console.log("修改菜单", JSON.stringify(record));
        this.refs.addMenu.updateHandle(record);
    }

    deleteHandle = (parentId, id) => {
        console.log("删除菜单");
    }

    render() {
        const {containerHeight} = this.props;

        console.log("containerHeight===", containerHeight);

        const columns = this.columns;
        const rowSelection = this.rowSelection;
        const data = this.data;


        return(
            <div>
                <h2>树形列表例子：</h2><br/>
                {/*<Button className="editable-add-btn" onClick={this.addHandle}>Add</Button>*/}
                <Table columns={columns} rowSelection={rowSelection} dataSource={data} pagination={{ pageSize: 20 }} scroll={{ y: containerHeight }} />

                <AddMenuPage ref="addMenu" />
            </div>
        )
    }
}

export default Dimensions({
    getHeight: function(element) {
        return window.innerHeight - 250;
    },
    containerStyle: {marginTop: 20, marginLeft: 10, marginRight: 10 } //, transitionProperty: 'width', transitionDuration: '0.5s', transitionTimingFunction:'linear'
})(TableTree);